<template>
  <div class="sysMain">
    <div class="sysTitle">
      <span>说 明</span>
    </div>
    
    <div class="stContent"><span class="maintenaince">设 备 维 护</span>
      <div>
        升级网络数码播放终端、网络机架式播放终端、紧急求助控制面板、多功能点播彩屏、网络解码音箱
        网络化工业电话对讲终端、多功能求助控制面板、网络化报警终端、网络无线遥控、网络数码功放
      </div>
    </div>
  
    <div class="ndContent">  <span class="backup">系 统 备 份</span>
      <div>备份网络化主机软件、定时点、歌曲、设备信息</div>
    </div>
    <div class="buttons">
      <button  @click="change(item,index)" v-for="(item,index) in buttons " :key="index"  :class="{isSetted: currentIndex===index}">{{ item }}</button>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const buttons=ref(["智 能 寻 呼 台","设 备 维 护","系 统 备 份"])
const currentIndex=ref(0);
const change=(item,index)=>{
    currentIndex.value=index
}
</script>
<style scoped>
@import url("./syestem_maintenance.less");
</style>